<template>
  <div style="text-align: left">
    <el-button
      size="small"
      type="primary"
      icon="el-icon-download"
      @click="outputByTag"
      >格式导出</el-button
    >
    <el-dialog
      title="点击需要加入的内容"
      width="740px"
      :visible.sync="dialogVisible"
    >
      <el-tag
        :class="tag.disabled ? 'click-disable' : 'my-tag'"
        v-for="tag in tags"
        @click="tag.disabled ? '' : addTag(tag)"
        :key="tag.key"
        type="info"
        effect="plain"
        >{{ tag.label }}</el-tag
      >
      <el-button
        class="el-tag el-tag--plain el-tag--info"
        size="small"
        @click="addSpace"
        >+ 空格</el-button
      >
      <!-- 新增按钮 -->
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      ></el-input>
      <el-button
        class="el-tag el-tag--plain el-tag--info"
        v-else
        size="small"
        @click="showInput"
        >+ 其他符号</el-button
      >
      <el-card shadow="never">
        <draggable animation="400" :value="selectedTag" @end="draggTag">
          <el-tag
            v-for="tag in selectedTag"
            :key="tag.id"
            type="info"
            closable
            effect="plain"
            @close="handleClose(tag)"
            disable-transitions
            >{{ tag.label }}</el-tag
          >
        </draggable>
      </el-card>
      <el-input
        style="margin-top: 20px"
        v-if="canText"
        type="textarea"
        autosize
        v-model="textarea"
      ></el-input>
      <span slot="footer">
        <el-button @click="dialogVisible = false">返 回</el-button>
        <el-button type="primary" @click="submitOutputText">导 出</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: { draggable },
  props: {
    tableData: Array,
    tags: Array,
    selectedTag: Array,
  },
  data() {
    return {
      dialogVisible: false,
      // 新增tag
      inputVisible: false,
      inputValue: "",
      // 导出的文本
      textarea: "",
      canText: false,
    };
  },
  methods: {
    // 拖动tag触发的事件
    draggTag(e) {
      let arr = this.selectedTag;
      arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]);
      this.$nextTick(function () {
        this.selectedTag = arr;
      });
    },
    // 添加tag
    addTag(tag) {
      this.selectedTag.push(tag);
      let obj = this.tags.find((s) => s.key == tag.key);
      if (obj) {
        obj.disabled = true;
      }
    },
    // 显示输入tag
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 完成输入tag
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        let tag = {
          key: inputValue,
          label: inputValue,
        };
        this.selectedTag.push(tag);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 添加空格tag
    addSpace() {
      let tag = {
        key: " ",
        label: "空格",
      };
      this.selectedTag.push(tag);
    },
    // 删除tag
    handleClose(tag) {
      this.selectedTag.splice(this.selectedTag.indexOf(tag), 1);
      let obj = this.tags.find((s) => s.key == tag.key);
      if (obj) {
        obj.disabled = false;
      }
    },
    // 导出文本
    tagToString() {
      let str =
        "`" +
        this.selectedTag
          .map((x) => {
            return x.key;
          })
          .join("") +
        "`";
      return this.tableData
        .map((obj, index) => {
          console.log(obj, index);
          return eval(str);
        })
        .join("\n");
    },
    // 拉起tag导出
    outputByTag() {
      this.canText = false;
      this.dialogVisible = true;
    },
    // 导出为文本
    submitOutputText() {
      this.canText = true;
      this.textarea = this.tagToString();
    },
  },
};
</script>
<style scoped>
.input-new-tag {
  width: 102.35px;
  vertical-align: bottom;
  margin-left: 10px;
  margin-bottom: 10px;
}
.my-tag:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  cursor: pointer;
}
.click-disable {
  cursor: not-allowed;
}
.el-tag {
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>